<!-- 学生优秀榜( top 10) -->
<template>
    <div class="excellent-container" ref="excellentChart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'Excellent',
    data() {
        return {
            chart: null,
            option: {
                grid: {
                    top: 35,
                    left: 15,
                    right: 15,
                    bottom: 15,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0, 20, 40, 0.8)',
                    extraCssText: 'box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); border: 1px solid rgba(0, 255, 255, 0.2); border-radius: 4px;',
                    borderWidth: 1,
                    confine: false,
                    appendToBody: true,
                    textStyle: {
                        color: '#00ffff',
                        fontSize: 13,
                        fontFamily: 'Arial, sans-serif'
                    },
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: 'rgba(0, 255, 255, 0.1)'
                        }
                    },
                    formatter: params => {
                        const title = `<div style="border-bottom: 1px solid rgba(0, 255, 255, 0.2); padding-bottom: 5px; margin-bottom: 5px;">${params[0].name}</div>`
                        const content = params.map(item => {
                            if (item.seriesType === 'bar') {
                                return `
                                    <div style="display: flex; justify-content: space-between; margin: 3px 0;">
                                        <span style="color: #00ffff;">${item.marker}${item.seriesName}：</span>
                                        <span style="color: #00ffff; font-weight: bold;">${item.value}</span>
                                    </div>
                                `
                            }
                            return ''
                        }).join('')
                        return `<div style="padding: 3px;">${title}${content}</div>`
                    }
                },
                xAxis: {
                    data: [],
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#4176a3',
                            width: '0.5'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 8
                    }
                },
                yAxis: [{
                    name: '',
                    nameTextStyle: {
                        align: 'left',
                        fontSize: 11,
                        color: '#4176a3'
                    },
                    type: 'value',
                    min: 0,
                    max: 100,
                    axisLine: { show: false },
                    splitLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                        show: true,
                        fontSize: 12,
                        color: '#ADD6FF'
                    }
                }],
                series: [{
                    name: '',
                    type: 'bar',
                    barWidth: 10,
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(21,136,209,0.1)'
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#1893FE' },
                            { offset: 1, color: '#1EE3E8' }
                        ])
                    },
                    data: []
                }, {
                    type: 'pictorialBar',
                    barWidth: 30,
                    itemStyle: { color: '#021C46' },
                    symbolRepeat: 'true',
                    symbolMargin: 3,
                    symbol: 'rect',
                    symbolSize: [30, 4],
                    data: [],
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 14,
                        color: '#fff',
                        formatter: params => params.data
                    }
                }]
            }
        }
    },
    computed: {
        requestData() {
            return {
                missionType: this.$store.state.mission,
                studentClassId: this.$store.state.current
            }
        }
    },
    watch: {
        requestData: {
            handler: 'fetchData',
            deep: true
        }
    },
    mounted() {
        this.fetchData()
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize)
        this.chart?.dispose()
    },
    methods: {
        handleResize() {
            this.chart?.resize()
        },
        async fetchData() {
            try {
                const response = await this.$axios.post("/group/topTen", this.requestData)
                const { name, score } = response.data.data || {}
                
                if (name?.length && score?.length) {
                    this.option.xAxis.data = name
                    this.option.series[0].data = score
                    this.option.series[1].data = score
                } else {
                    this.option.xAxis.data = []
                    this.option.series[0].data = []
                    this.option.series[1].data = []
                }
                
                this.initChart()
            } catch (error) {
                console.error('获取数据失败', error)
                this.option.xAxis.data = []
                this.option.series[0].data = []
                this.option.series[1].data = []
                this.initChart()
            }
        },
        initChart() {
            if (!this.chart) {
                this.chart = echarts.init(this.$refs.excellentChart)
            }
            this.chart.setOption(this.option)
        }
    }
}
</script>

<style scoped>
.excellent-container {
    width: 100%;
    height: 80%;
}
</style>